<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试权限</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        li {
            list-style-image: url('image/1631082821.jpg');

        }
    </style>
</head>

<body>
    <div id="tree"></div>
    <lable>权限值：<span id="authority"></span></lable>
    <script>

        let data = [
            {
                name: "全部",
                authority: [1 << 0, 1 << 1],
                children: [{
                    name: "配置中心",
                    authority: [1 << 2, 1 << 3],
                    children: [{
                        name: "全局配置",
                        authority: [1 << 6, 1 << 7],
                    }, {
                        name: "网络配置",
                        authority: [1 << 8, 1 << 9],
                    }, {
                        name: "路由配置",
                        authority: [1 << 10, 1 << 11],
                        children: [{
                            name: "BGP路由",
                            authority: [1 << 16, 1 << 17],
                        }, {
                            name: "静态路由",
                            authority: [1 << 18, 1 << 19],

                        }]
                    }]
                }, {
                    name: "运行信息",
                    authority: [1 << 4, 1 << 5],
                    children: [
                        {
                            name: "互联列表",
                            authority: [1 << 12, 1 << 13],
                        }, {
                            name: "ARP列表",
                            authority: [1 << 14, 1 << 15],
                        }
                    ]
                }]
            }
        ]

        function changeAuth(obj) {
            if (($(obj).attr("data-auth") & userAuthority) != 0) {
                userAuthority = $(obj).attr("data-auth") ^ userAuthority
                $(obj).css({ "color": "black" })
            } else {
                userAuthority = $(obj).attr("data-auth") | userAuthority
                $(obj).css({ "color": "blue" })
                //checkPArent(obj);
            }
            $("#authority").text(userAuthority)
        }

        function checkPArent(obj) {
            if ($(obj).parent().parent().parent().parent().first().find(`button:eq(${$(obj).parent().find("button").index() - 1})`) != null) {
                $(obj).parent().parent().parent().parent().first().find(`button:eq(${$(obj).parent().find("button").index() - 1})`).css({ "color": "blue" })
                userAuthority = $(obj).parent().parent().parent().parent().first().find(`button:eq(${$(obj).parent().find("button").index() - 1}})`).attr("data-auth") | userAuthority
                checkPArent($(obj).parent().parent().parent().parent().first().find(`button:eq(${$(obj).parent().find("button").index() - 1})`))
            }
        }


        function formatTmp(data, userAuthority) {
            return `
                    <ul>
                        <li>
                            <span>${data.name}</span>  
                            <button style="color:${(data.authority[0] & userAuthority) != 0 ? "blue" : "black"}" data-auth="${data.authority[0]}" onclick="changeAuth(this)">查看</button>  
                            <button style="color:${(data.authority[1] & userAuthority) != 0 ? "blue" : "black"}" data-auth="${data.authority[1]}" onclick="changeAuth(this)">设置</button>  
                        </li>
                    </ul>
                    `;
        }
        let all = (1 << 20) - 1;
        let userAuthority = 0;
        function show(parent, data, deep, userAuthority) {
            data.forEach(element => {
                let ul = $(formatTmp(element, userAuthority))
                if (element.children != null) {
                    let li = $("<li></li>");
                    show(li, element.children, ++deep, userAuthority);
                    $(ul).append(li)
                }
                $(parent).append(ul)
            });
        }
        show($("#tree"), data, 0, userAuthority);
        $("#authority").text(userAuthority)
    </script>
</body>

</html>